<template>
  <div>
    <!-- 持仓记录1（强龙低吸 多头趋势） 成功案例3（热点轮动、生一度IV、小盘成长） -->
    <div :class="{ cp_chi_cang_auto: isGetSuccCase }" class="cp_chi_cang">
      <div v-show="isGetSuccCase">
        <div class="history_table_wrapper" v-if="list.length">
          <div>
            <stock-list
              :list="list"
              stockTag="heavy"
              unit="rem"
              fixed="left"
              :expand="false"
              fixedHead="true"
              @headSort="watchHeadSort"
              @clickRow="watchClickRow"
            >
              <stock-list-item
                prop="stockCode"
                label="股票名称"
                label-width="1.7rem"
                label-align="left"
              >
                <tempalte v-slot="scope">
                  <div class="stock_detail_template">
                    <div v-if="scope.stockName">{{ scope.stockName }}</div>
                    <div v-else>--</div>
                    <div>{{ scope.stockCode }}</div>
                  </div>
                </tempalte>
              </stock-list-item>
              <stock-list-item
                prop="nowPrice"
                label="现价"
                sortable="true"
                label-width="1.4rem"
                label-align="right"
              >
                <tempalte v-slot="scope">
                  <div class="table_in_template">
                    <div v-if="scope.upDownPercent > 0" class="up_data">
                      {{ scope.nowPrice }}
                    </div>
                    <div
                      v-else-if="scope.nowPrice && Number(scope.nowPrice) === 0"
                      class="zero_data"
                    >
                      {{ scope.nowPrice }}
                    </div>
                    <div v-else-if="scope.nowPrice === '' || scope.nowPrice === -9999">--</div>
                    <div v-else class="down_data">
                      {{ scope.nowPrice }}
                    </div>
                  </div>
                </tempalte>
              </stock-list-item>
              <stock-list-item
                prop="upDownPercent"
                label="涨幅"
                label-width="1.4rem"
                sortable="false"
                label-align="right"
              >
                <tempalte v-slot="scope">
                  <div class="table_in_template">
                    <div v-if="scope.upDownPercent > 0" class="up_data">
                      {{ scope.upDownPercent }}%
                    </div>
                    <div
                      v-else-if="scope.upDownPercent && Number(scope.upDownPercent) === 0"
                      class="zero_data"
                    >
                      {{ scope.upDownPercent }}%
                    </div>
                    <div v-else-if="!scope.upDownPercent || scope.upDownPercent === -9999">--</div>
                    <div v-else class="down_data">{{ scope.upDownPercent }}%</div>
                  </div>
                </tempalte>
              </stock-list-item>
              <stock-list-item
                prop="rangeProfit"
                label="区间涨幅"
                sortable="true"
                label-width="1.6rem"
                label-align="right"
              >
                <tempalte v-slot="scope">
                  <div class="table_in_template">
                    <div v-if="scope.rangeProfit > 0" class="up_data">{{ scope.rangeProfit }}%</div>
                    <div
                      v-else-if="scope.rangeProfit && Number(scope.rangeProfit) === 0"
                      class="zero_data"
                    >
                      {{ parseFloat(scope.rangeProfit).toFixed(2) }}%
                    </div>
                    <div v-else-if="!scope.rangeProfit || scope.rangeProfit === ''">--</div>
                    <div v-else class="down_data">{{ scope.rangeProfit }}%</div>
                  </div>
                </tempalte>
              </stock-list-item>
              <stock-list-item
                prop="highestProfit"
                label="最高涨幅"
                sortable="true"
                label-width="1.6rem"
                label-align="right"
              >
                <tempalte v-slot="scope">
                  <div class="table_in_template">
                    <div v-if="scope.highestProfit > 0" class="up_data">
                      {{ scope.highestProfit }}%
                    </div>
                    <div
                      v-else-if="scope.highestProfit && Number(scope.highestProfit) === 0"
                      class="zero_data"
                    >
                      {{ parseFloat(scope.highestProfit).toFixed(2) }}%
                    </div>
                    <div v-else-if="!scope.highestProfit || scope.highestProfit === ''">--</div>
                    <div v-else class="down_data">{{ scope.highestProfit }}%</div>
                  </div>
                </tempalte>
              </stock-list-item>
              <stock-list-item
                prop="buyDate"
                label="买入时间"
                sortable="true"
                label-width="2.2rem"
                label-align="right"
              >
                <tempalte v-slot="scope">
                  <div class="table_in_template">
                    <div v-if="scope.buyDate">
                      {{ scope.buyDate }}
                    </div>
                    <div v-else>--</div>
                  </div>
                </tempalte>
              </stock-list-item>
              <stock-list-item prop="status" label="状态" label-width="1.4rem" label-align="right">
                <tempalte v-slot="scope">
                  <div class="table_in_template">
                    <div v-if="scope.status">
                      {{ scope.status }}
                    </div>
                    <div v-else>--</div>
                  </div>
                </tempalte>
              </stock-list-item>
            </stock-list>
          </div>
        </div>
        <div v-else>
          <BlockStatus></BlockStatus>
        </div>
      </div>
      <div v-show="isDragonTwo">
        <div class="history_table_wrapper" v-if="list.length">
          <div>
            <stock-list
              :list="list"
              stockTag="heavy"
              unit="rem"
              fixed="left"
              :expand="false"
              fixedHead="true"
              @headSort="watchHeadSort"
              @clickRow="watchClickRow"
            >
              <stock-list-item
                prop="stockCode"
                label="股票名称"
                label-width="1.7rem"
                label-align="left"
              >
                <tempalte v-slot="scope">
                  <div class="stock_detail_template">
                    <div v-if="scope.stockName">{{ scope.stockName }}</div>
                    <div v-else>--</div>
                    <div>{{ scope.stockCode }}</div>
                  </div>
                </tempalte>
              </stock-list-item>
              <stock-list-item
                prop="nowPrice"
                label="现价"
                sortable="true"
                label-width="1.4rem"
                label-align="right"
              >
                <tempalte v-slot="scope">
                  <div class="table_in_template">
                    <div v-if="scope.upDownPercent > 0" class="up_data">
                      {{ scope.nowPrice }}
                    </div>
                    <div
                      v-else-if="scope.nowPrice && Number(scope.nowPrice) === 0"
                      class="zero_data"
                    >
                      {{ scope.nowPrice }}
                    </div>
                    <div v-else-if="scope.nowPrice === '' || scope.nowPrice === -9999">--</div>
                    <div v-else class="down_data">
                      {{ scope.nowPrice }}
                    </div>
                  </div>
                </tempalte>
              </stock-list-item>
              <stock-list-item
                prop="upDownPercent"
                label="涨幅"
                label-width="1.4rem"
                sortable="false"
                label-align="right"
              >
                <tempalte v-slot="scope">
                  <div class="table_in_template">
                    <div v-if="scope.upDownPercent > 0" class="up_data">
                      {{ scope.upDownPercent }}%
                    </div>
                    <div
                      v-else-if="scope.upDownPercent && Number(scope.upDownPercent) === 0"
                      class="zero_data"
                    >
                      {{ scope.upDownPercent }}%
                    </div>
                    <div v-else-if="!scope.upDownPercent || scope.upDownPercent === -9999">--</div>
                    <div v-else class="down_data">{{ scope.upDownPercent }}%</div>
                  </div>
                </tempalte>
              </stock-list-item>
              <stock-list-item
                prop="rangeProfit"
                label="区间涨幅"
                sortable="true"
                label-width="1.6rem"
                label-align="right"
              >
                <tempalte v-slot="scope">
                  <div class="table_in_template">
                    <div v-if="scope.rangeProfit > 0" class="up_data">{{ scope.rangeProfit }}%</div>
                    <div
                      v-else-if="scope.rangeProfit && Number(scope.rangeProfit) === 0"
                      class="zero_data"
                    >
                      {{ parseFloat(scope.rangeProfit).toFixed(2) }}%
                    </div>
                    <div v-else-if="!scope.rangeProfit || scope.rangeProfit === ''">--</div>
                    <div v-else class="down_data">{{ scope.rangeProfit }}%</div>
                  </div>
                </tempalte>
              </stock-list-item>
              <stock-list-item
                prop="highestProfit"
                label="最高涨幅"
                sortable="true"
                label-width="1.6rem"
                label-align="right"
              >
                <tempalte v-slot="scope">
                  <div class="table_in_template">
                    <div v-if="scope.highestProfit > 0" class="up_data">
                      {{ scope.highestProfit }}%
                    </div>
                    <div
                      v-else-if="scope.highestProfit && Number(scope.highestProfit) === 0"
                      class="zero_data"
                    >
                      {{ parseFloat(scope.highestProfit).toFixed(2) }}%
                    </div>
                    <div v-else-if="!scope.highestProfit || scope.highestProfit === ''">--</div>
                    <div v-else class="down_data">{{ scope.highestProfit }}%</div>
                  </div>
                </tempalte>
              </stock-list-item>
              <stock-list-item
                prop="buyDate"
                label="买入时间"
                sortable="true"
                label-width="2.2rem"
                label-align="right"
              >
                <tempalte v-slot="scope">
                  <div class="table_in_template">
                    <div v-if="scope.buyDate">
                      {{ scope.buyDate }}
                    </div>
                    <div v-else>--</div>
                  </div>
                </tempalte>
              </stock-list-item>
              <stock-list-item
                prop="buyPrice"
                label="买入价格"
                sortable="true"
                label-width="1.6rem"
                label-align="right"
              >
                <tempalte v-slot="scope">
                  <div class="table_in_template">
                    <div v-if="scope.buyPrice">
                      {{ scope.buyPrice }}
                    </div>
                    <div v-else>--</div>
                  </div>
                </tempalte>
              </stock-list-item>
              <stock-list-item
                prop="sellDate"
                label="卖出时间"
                sortable="true"
                label-width="2.2rem"
                label-align="right"
              >
                <tempalte v-slot="scope">
                  <div class="table_in_template">
                    <div v-if="scope.sellDate">
                      {{ scope.sellDate }}
                    </div>
                    <div v-else>--</div>
                  </div>
                </tempalte>
              </stock-list-item>
              <stock-list-item
                prop="sellPrice"
                label="卖出价格"
                sortable="true"
                label-width="1.6rem"
                label-align="right"
              >
                <tempalte v-slot="scope">
                  <div class="table_in_template">
                    <div v-if="scope.sellPrice">
                      {{ scope.sellPrice }}
                    </div>
                    <div v-else>--</div>
                  </div>
                </tempalte>
              </stock-list-item>
              <stock-list-item
                prop="shape"
                label="形态模型"
                label-width="1.8rem"
                label-align="right"
              >
                <tempalte v-slot="scope">
                  <div class="table_in_template">
                    <div v-if="scope.shape">{{ scope.shape }}</div>
                    <div v-else>--</div>
                  </div>
                </tempalte>
              </stock-list-item>
              <stock-list-item
                prop="position"
                label="仓位"
                sortable="true"
                label-width="1.8rem"
                label-align="right"
              >
                <tempalte v-slot="scope">
                  <div class="table_in_template">
                    <div v-if="scope.position > 0" class="up_data">{{ scope.position }}%</div>
                    <div v-else-if="Number(scope.position) === 0" class="zero_data">
                      {{ scope.position }}
                    </div>
                    <div v-else-if="!scope.position || scope.position === ''">--</div>
                    <div v-else class="down_data">{{ scope.position }}%</div>
                  </div>
                </tempalte>
              </stock-list-item>
              <stock-list-item prop="status" label="状态" label-width="2.0rem" label-align="right">
                <tempalte v-slot="scope">
                  <div class="table_in_template">
                    <div v-if="scope.status">
                      {{ scope.status }}
                    </div>
                    <div v-else>--</div>
                  </div>
                </tempalte>
              </stock-list-item>
            </stock-list>
          </div>
        </div>
        <div v-else>
          <BlockStatus></BlockStatus>
        </div>
      </div>
      <div v-show="isManyTwo">
        <div class="history_table_wrapper" v-if="list.length">
          <div>
            <stock-list
              :list="list"
              stockTag="heavy"
              unit="rem"
              fixed="left"
              :expand="false"
              fixedHead="true"
              @headSort="watchHeadSort"
              @clickRow="watchClickRow"
            >
              <stock-list-item
                prop="stockCode"
                label="股票名称"
                label-width="1.7rem"
                label-align="left"
              >
                <tempalte v-slot="scope">
                  <div class="stock_detail_template">
                    <div v-if="scope.stockName">{{ scope.stockName }}</div>
                    <div v-else>--</div>
                    <div>{{ scope.stockCode }}</div>
                  </div>
                </tempalte>
              </stock-list-item>
              <stock-list-item
                prop="nowPrice"
                label="现价"
                sortable="true"
                label-width="1.4rem"
                label-align="right"
              >
                <tempalte v-slot="scope">
                  <div class="table_in_template">
                    <div v-if="scope.upDownPercent > 0" class="up_data">
                      {{ scope.nowPrice }}
                    </div>
                    <div
                      v-else-if="scope.nowPrice && Number(scope.nowPrice) === 0"
                      class="zero_data"
                    >
                      {{ scope.nowPrice }}
                    </div>
                    <div v-else-if="scope.nowPrice === '' || scope.nowPrice === -9999">--</div>
                    <div v-else class="down_data">
                      {{ scope.nowPrice }}
                    </div>
                  </div>
                </tempalte>
              </stock-list-item>
              <stock-list-item
                prop="upDownPercent"
                label="涨幅"
                label-width="1.4rem"
                sortable="false"
                label-align="right"
              >
                <tempalte v-slot="scope">
                  <div class="table_in_template">
                    <div v-if="scope.upDownPercent > 0" class="up_data">
                      {{ scope.upDownPercent }}%
                    </div>
                    <div
                      v-else-if="scope.upDownPercent && Number(scope.upDownPercent) === 0"
                      class="zero_data"
                    >
                      {{ scope.upDownPercent }}%
                    </div>
                    <div v-else-if="!scope.upDownPercent || scope.upDownPercent === -9999">--</div>
                    <div v-else class="down_data">{{ scope.upDownPercent }}%</div>
                  </div>
                </tempalte>
              </stock-list-item>
              <stock-list-item
                prop="rangeProfit"
                label="区间涨幅"
                sortable="true"
                label-width="1.6rem"
                label-align="right"
              >
                <tempalte v-slot="scope">
                  <div class="table_in_template">
                    <div v-if="scope.rangeProfit > 0" class="up_data">{{ scope.rangeProfit }}%</div>
                    <div
                      v-else-if="scope.rangeProfit && Number(scope.rangeProfit) === 0"
                      class="zero_data"
                    >
                      {{ parseFloat(scope.rangeProfit).toFixed(2) }}%
                    </div>
                    <div v-else-if="!scope.rangeProfit || scope.rangeProfit === ''">--</div>
                    <div v-else class="down_data">{{ scope.rangeProfit }}%</div>
                  </div>
                </tempalte>
              </stock-list-item>
              <stock-list-item
                prop="highestProfit"
                label="最高涨幅"
                sortable="true"
                label-width="1.6rem"
                label-align="right"
              >
                <tempalte v-slot="scope">
                  <div class="table_in_template">
                    <div v-if="scope.highestProfit > 0" class="up_data">
                      {{ scope.highestProfit }}%
                    </div>
                    <div
                      v-else-if="scope.highestProfit && Number(scope.highestProfit) === 0"
                      class="zero_data"
                    >
                      {{ parseFloat(scope.highestProfit).toFixed(2) }}%
                    </div>
                    <div v-else-if="!scope.highestProfit || scope.highestProfit === ''">--</div>
                    <div v-else class="down_data">{{ scope.highestProfit }}%</div>
                  </div>
                </tempalte>
              </stock-list-item>
              <stock-list-item
                prop="buyDate"
                label="买入时间"
                sortable="true"
                label-width="2.2rem"
                label-align="right"
              >
                <tempalte v-slot="scope">
                  <div class="table_in_template">
                    <div v-if="scope.buyDate">
                      {{ scope.buyDate }}
                    </div>
                    <div v-else>--</div>
                  </div>
                </tempalte>
              </stock-list-item>
              <stock-list-item
                prop="buyPrice"
                label="买入价格"
                sortable="true"
                label-width="1.6rem"
                label-align="right"
              >
                <tempalte v-slot="scope">
                  <div class="table_in_template">
                    <div v-if="scope.buyPrice">
                      {{ scope.buyPrice }}
                    </div>
                    <div v-else>--</div>
                  </div>
                </tempalte>
              </stock-list-item>
              <stock-list-item
                prop="sellDate"
                label="卖出时间"
                sortable="true"
                label-width="2.2rem"
                label-align="right"
              >
                <tempalte v-slot="scope">
                  <div class="table_in_template">
                    <div v-if="scope.sellDate">
                      {{ scope.sellDate }}
                    </div>
                    <div v-else>--</div>
                  </div>
                </tempalte>
              </stock-list-item>
              <stock-list-item
                prop="sellPrice"
                label="卖出价格"
                sortable="true"
                label-width="1.6rem"
                label-align="right"
              >
                <tempalte v-slot="scope">
                  <div class="table_in_template">
                    <div v-if="scope.sellPrice">
                      {{ scope.sellPrice }}
                    </div>
                    <div v-else>--</div>
                  </div>
                </tempalte>
              </stock-list-item>
              <stock-list-item
                prop="position"
                label="仓位"
                sortable="true"
                label-width="1.8rem"
                label-align="right"
              >
                <tempalte v-slot="scope">
                  <div class="table_in_template">
                    <div v-if="scope.position > 0" class="up_data">{{ scope.position }}%</div>
                    <div v-else-if="Number(scope.position) === 0" class="zero_data">
                      {{ scope.position }}
                    </div>
                    <div v-else-if="!scope.position || scope.position === ''">--</div>
                    <div v-else class="down_data">{{ scope.position }}%</div>
                  </div>
                </tempalte>
              </stock-list-item>
              <stock-list-item prop="status" label="状态" label-width="2.0rem" label-align="right">
                <tempalte v-slot="scope">
                  <div class="table_in_template">
                    <div v-if="scope.status">
                      {{ scope.status }}
                    </div>
                    <div v-else>--</div>
                  </div>
                </tempalte>
              </stock-list-item>
            </stock-list>
          </div>
        </div>
        <div v-else>
          <BlockStatus></BlockStatus>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { redgreenhandler, jumpTokline, compare, webHQCommon, apiDataDeal } from '../utils/index';
import { GET_POSITION_RECORD, GET_SUCCESS_CASE } from '@/apis';
import config from '../config/index';
import BlockStatus from './common/BlockStatus.vue';
export default {
  name: 'otherHistory',
  data() {
    return {
      list: [],
      detailTableData: [],
      showOtherMode: true,
      isDragonTwo: [2072].includes(Number(this.$route.query.gpc_id)), //强龙低吸
      isManyTwo: [202].includes(Number(this.$route.query.gpc_id)), //多头趋势
      isGetSuccCase: [11, 4, 6].includes(Number(this.$route.query.gpc_id)), //热点轮动、小盘成长、深一度IV
    };
  },
  components: {
    BlockStatus,
  },
  watch: {
    detailTableData: {
      handler(newValue) {
        if (newValue) {
          this.list = [];
          newValue.forEach(item => {
            this.list.push(item);
          });
          this.$pageStatus.close();
        }
      },
    },
  },
  mounted() {
    $(window).scrollTop(0);
    this.getCPData();
    this.$pageStatus.loading();
  },
  methods: {
    // 获取组合数据
    async getCPData() {
      const query = {};
      let res;
      try {
        query.pool_id = Number(this.$route.query.gpc_id) === 4 ? 2 : this.$route.query.gpc_id;
        if (this.isGetSuccCase) {
          query.clientid = getParam('product');
          res = await GET_SUCCESS_CASE(query);
        } else {
          // 一次性获取全部数据
          query.page = 1;
          query.pagesize = 1000;
          query.sortitem = 'sell_date';
          query.sortstr = 'desc';
          res = await GET_POSITION_RECORD(query);
        }
  
        if (Number(res.errorcode) === 0) {
          if (!window.getAppVersion()) return;
          let results = [];
          const stockIdArr = [];
          const marketIdArr = [];
          results = res.result;
          const that = this;
          results.forEach(item => {
            stockIdArr.push(item.stock_code);
            marketIdArr.push(item.market);
            this.detailTableData.push(apiDataDeal(item));
          });
          //客户端协议实时获取：现价，涨跌幅
          webHQCommon(stockIdArr, marketIdArr, this.detailTableData, list => {
            this.detailTableData = list;
          });
          // 默认买入价格排序
          this.detailTableData.sort(compare('buyDateSort')).reverse();
          return;
        }
      } catch (error) {
        _t.errorReport({name:`OtherHistory.vue组件中方法getCPData错误。${error.name}`,message:`接口url：${_Global.api.positionRecord}，参数：${JSON.stringify(query)}。${error.message}`,stack:error.stack,category:'js'});
      }
      this.$pageStatus.fail(() => {
        this.$toast('刷新成功');
        this.getCPData();
      });
    },
    // 根据子组件中传来的值，对所有数据排序
    watchHeadSort(arg1) {
      if (arg1.sortKey === 'stockCode' || arg1.sortKey === 'status' || arg1.sortKey === 'shape') {
        return; //股票名称/状态/形态模型不排序
      }
      if (arg1.sortKey === 'buyDate') {
        if (arg1.currentSortTag === 1) {
          this.detailTableData.sort(compare('buyDateSort'));
        } else if (arg1.currentSortTag === 2) {
          this.detailTableData.sort(compare('buyDateSort')).reverse();
        }
        return;
      }
      if (arg1.sortKey === 'sellDate') {
        if (arg1.currentSortTag === 1) {
          this.detailTableData.sort(compare('buySellDate'));
        } else if (arg1.currentSortTag === 2) {
          this.detailTableData.sort(compare('buySellDate')).reverse();
        }
        return;
      }
      if (arg1.currentSortTag === 1) {
        this.detailTableData.sort(compare(arg1.sortKey));
      } else if (arg1.currentSortTag === 2) {
        this.detailTableData.sort(compare(arg1.sortKey)).reverse();
      }
    },
    //获取点击table的row 跳k线详情页
    watchClickRow(row) {
      jumpTokline(row.stockCode, row.market);
    },
  },
};
</script>
<style lang="less" scoped>
.cp_chi_cang_auto {
  height: 100vh;
}
.cp_chi_cang {
  width: 100%;
  background-color: #ffffff;
}
.history_table_wrapper {
  padding: 0 0.32rem;
}
[theme-mode='black'] .cp_chi_cang {
  width: 100%;
  background-color: #121212;
}
</style>
